<template>
  <div>
    <!-- 
      code: "Acl" // 标识名称
      deleted: false
      gmtCreate: "2020-11-30 16:40:08"
      gmtModified: "2020-11-30 16:40:08"
      id: "1333329957008228353"
      level: 2
      name: "权限管理"
      pid: "1" // 所属节点的id
      select: false
      status: null
      toCode: ""
      type: 1  // 1: 路由 2: 按钮
      children: []
    -->
    <!-- 
      code: "btn.Role.assgin"
      deleted: false
      gmtCreate: "2020-11-30 16:50:13"
      gmtModified: "2020-12-01 08:13:47"
      id: "1333332492158812161"
      level: 4
      name: "分配权限"
      pid: "1333330152781561858"
      select: false
      status: null
      toCode: "RoleAuth"
      type: 2
     -->
    <el-table border style="margin-bottom: 20px;" row-key="id" :data="menuPermissionList" :expand-row-keys="expandKeys">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />

      <el-table-column prop="toCode" label="跳转权限值" />

      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button icon="el-icon-plus" @click="toAddPermission(scope.row)" :disabled="scope.row.level === 4"
            type="primary" size="small" />

          <el-button @click="toUpdatePermission(scope.row)" icon="el-icon-edit-outline" type="primary" size="small"
            :disabled="scope.row.level === 1" :title="scope.row.level === 4 ? '修改功能' : '修改菜单'" />

          <el-button @click="removePermission(scope.row)" icon="el-icon-delete" :disabled="scope.row.level === 1"
            type="danger" size="small" title="删除" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" @close="resetData">
      <el-form ref="permissionRef" :model="permission" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permission.code" />
        </el-form-item>

        <el-form-item label="跳转路由权限值" prop="toCode" v-if="permission.level === 4">
          <el-input v-model="permission.toCode" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="resetData">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuPermissionList: [],
      expandKeys: [],
      dialogVisible: false,
      permission: {
        type: 1,
        level: 0,
        name: '',
        code: '',
        toCode: '',
      }
    }
  },
  methods: {
    // 获取页面数据
    async fetchPermissionList() {
      const result = await this.$API.permission.getPermissionList()
      console.log(result)
      this.menuPermissionList = result.data.children
      this.expandKeys = [this.menuPermissionList[0].id]
      console.log(this.menuPermissionList)
      console.log(this.expandKeys)
    },

    // 根据级别得到要显示的添加dialog的标题
    getAddTitle(level) {
      if (level === 1 || level === 2) {
        return '添加菜单'
      } else {
        return '添加功能'
      }
    },

    // 显示添加权限的界面(菜单或功能)
    toAddPermission(row) {
      this.dialogVisible = true
      this.permission.pid = row.id
      this.permission.level = (row.level + 1)
      this.permission.type = this.permission.level === 4 ? 2 : 1

    },

    // 显示菜单添加或更新的dialog
    toUpdatePermission(row) {
      this.dialogVisible = true
      Object.assign(this.permission, row)
      this.permission.type = this.permission.level === 4 ? 2 : 1
    },


    // 重置数据
    resetData() {
      this.dialogVisible = false
      Object.assign(this.permission, {
        type: 1,
        level: 0,
        name: '',
        code: '',
        toCode: '',
        id: ''

      })
    },

    // 添加或更新功能权限
    async addOrUpdatePermission() {
      const { id } = this.permission
      if (this.permission.id) {
        await this.$API.permission.updatePermission(this.permission)
      } else {
        await this.$API.permission.addPermission(this.permission)
      }
      this.resetData()
      this.fetchPermissionList()
      this.fetchPermissionList()
    },


    // 删除数据
    async removePermission(permission) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$API.permission.removePermission(permission.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.fetchPermissionList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },
  mounted() {
    this.fetchPermissionList()
  },
  computed: {
    dialogTitle() {
      const { id, level } = this.permission
      if (id) {
        return level === 4 ? '修改功能' : '修改菜单'
      } else {
        return level === 4 ? '添加功能' : '添加菜单'
      }
    }
  }
}




</script>
<style></style>
